<script lang="ts" setup>
import { defineProps } from 'vue'
import { requestGetSoundSource } from '../../../utils/axiosURL'
import useSongURLStore from '../../../store/songURL'
import { storeToRefs } from "pinia";
import SongTime from '../../common/songTime/index.vue'

const { songName, playStates } = storeToRefs(useSongURLStore())
const songURLStore = useSongURLStore()
const { songList } = defineProps({
    songList: Array,     // 歌曲列表数组
})


// 双击击歌曲播放事件函数
const clickSongPlay = (id: number, name: string, singer: string, picUrl: string, duration: number, index: number) => {
    localStorage.setItem("playState", "false")
    songURLStore.playStateChange(false)
    requestGetSoundSource(id).then(({ data }: any) => {
        songURLStore.init(data[0].url, name, singer, picUrl, duration, index, id)
        localStorage.setItem('songInfomation', JSON.stringify(
            {
                songName: name,
                songUrl: data[0].url,
                singer: singer,
                picUrl: picUrl,
                duration: duration,
                index,
                id
            }
        ))
    }).catch((err: any) => {
        console.log(err);
    })
}
</script>


<template>
    <table>
        <thead>
            <tr>
                <td class="songTitleMusic">音乐标题</td>
                <td class="singer">歌手</td>
                <td class="album">专辑</td>
                <td class="time">时长</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in songList"
                @dblclick="clickSongPlay(item.id, item.name, item.ar[0].name, item.al.picUrl, item.dt, index)">
                <td>
                    <div class="leftFnIcon">
                        <span>{{ index + 1 < 10 ? `0${index + 1}` : index + 1 }}</span>
                                <span v-if="item.name !== songName" class="iconfont icon-xihuan"></span>
                                <span v-else>
                                    <span v-if="playStates" class="iconfont icon-24gf-volumeZero"></span>
                                    <span v-else class="iconfont icon-24gf-volumeMiddle"></span>
                                </span>
                                <span class="iconfont icon-xiazai"></span>
                    </div>
                    <div class="songName">
                        <div class="songTitle" :class="`${item.name === songName ? 'activePlay' : ''}`" ref="songTitle">
                            {{ item.name }}</div>
                        <div class="moreLabel" ref="moreLabel">
                            <button v-if=item.hr>Hi-Res</button>
                            <RouterLink :to="`/MVDetail/${item.mv}`">
                                <button class="mv" v-if=item.mv>MV</button>
                            </RouterLink>
                            <button v-if=item.sq>SQ</button>
                        </div>
                    </div>
                </td>
                <td>{{ item.ar[0].name }}</td>
                <td>{{ item.al.name }}</td>
                <td>
                    <SongTime :songDuration=item.dt />
                </td>
            </tr>
        </tbody>
    </table>
</template>


<style lang="scss" scoped>
table {
    width: 100%;

    thead {
        tr {
            td {
                font: {
                    weight: 100;
                    family: $textFont;
                    size: $font-size-sm;
                }

                color: rgb(182, 180, 180);
                line-height: 35px;
                text-align: left;
            }

            .songTitleMusic {
                width: 50%;
                max-width: 50%;
                padding-left: 115px;
                box-sizing: border-box;
            }

            .time {
                width: 10%;
            }
        }
    }

    tbody {
        tr {
            td {
                line-height: 35px;
                color: $font_main_color;

                font: {
                    size: $font-size-sm;
                    family: $textFont;
                }
            }

            td:nth-child(3) {
                max-width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            td:nth-child(1) {
                display: flex;

                .leftFnIcon {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    flex-basis: 115px;
                    min-width: 115px;
                    padding-left: 20px;
                    box-sizing: border-box;
                    color: rgb(182, 180, 180);

                    >span:nth-child(1) {
                        margin-right: 8px;
                    }

                    .icon-24gf-volumeZero,
                    .icon-24gf-volumeMiddle {
                        margin-left: 3px;
                        @include author_color('author_color');
                    }
                }

                .songName {
                    display: flex;
                    flex: 1;

                    .songTitle {
                        max-width: 55%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .activePlay {
                        @include author_color('author_color');
                    }

                    .moreLabel {
                        display: flex;
                        align-items: center;
                        width: auto;
                        height: 100%;

                        button {
                            border: none;
                            outline: none;
                            height: 16px;
                            line-height: 16px;
                            padding: 0 2px;
                            // border: 1.5px solid $theme-red;
                            border-width: 1px;
                            border-style: solid;
                            @include border_color('border_color');
                            background-color: #fff;
                            // color: $font_red_color;
                            @include author_color('author_color');
                            margin: 0 4px;
                            font-family: $activeTextFont;
                            font-size: $font-size-xs;
                            border-radius: 3px;
                            font-weight: bold;
                        }

                        .mv {
                            cursor: pointer;
                        }
                    }
                }
            }

            &:nth-child(odd) {
                background-color: rgb(250, 250, 250);
            }

            &:hover {
                background-color: rgb(241, 242, 243);
            }
        }

        .active {
            background-color: rgb(18, 15, 15) !important;
        }
    }
}
</style>
